<template>
    <dl class="item" @click="choose">
        <dt>
            <img src="../assets/logo.png" alt="">
        </dt>
        <dd>
            <h2>{{title}}</h2>
            <span>{{price}}</span>
            <span>{{num}}</span>
            <span class="circle">+</span>
        </dd>
    </dl>
</template>
<script>
export default {
    props:['title','id','price','num'],
    methods:{
        choose(){
            this.$emit('choose',this.id)
        }
    }
}
</script>
<style lang="scss">
    .item{
        flex:1;
        display: flex;
        img{
            width:80px;
        }
        .circle{
            width:20px;
            height:20px;
            background: blue;
            color:#fff;
            border-radius: 50%;
            display: block;
            text-align: center;
        }
    }
</style>

